<template>
    <div class="rankings-wrapper">
        <h1 class="header">2018年05月04日前排名</h1>
        <ul class="rankings">
            <li v-for="(item,index) in rankList" :key="index">
                <img :src=item.avatar />
                <div class="second">
                    <h1>{{ item.name }}</h1>
                    <p>ID：{{ item.id }}</p>
                </div>
                <div class="third">
                    <h1>{{ index+1 }}</h1>
                    <p>排名</p>
                </div>
            </li>
        </ul>
        <div class="myRank">
            <h1>我的</h1>
            <img src="http://boeertieoss.oss-cn-beijing.aliyuncs.com/webPage/default_avatar.jpg"/>
            <div class="second">
                <!--todo user信息获取 -->
                <h1 class="my">admin</h1>
                <p>ID：21312</p>
            </div>
            <div class="third">
                <h1 class="my">{{ rankings.myRank }}</h1>
                <p>排名</p>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: `rankings`,
        data() {
            return {
                rankings: {},
                rankList: []
            };
        },
        created() {
            this.$Spread.getRankList().then(res => {
                this.rankings = res;
                this.rankList = res.rankList;
                console.log(111, this.rankings);
            });
        },
        methods: {}
    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "../../assets/stylus/main.styl";
    .rankings-wrapper {
        .header {
            height: 10vw;
            flex-center();
        }
        .rankings {
            width: 100%;
            & li {
                width: 100%;
                height: 20vw;
                background white
                padding 3vw
                box-sizing border-box
                margin-bottom: 10px;
                flex-x();
                & img {
                    width: 15vw
                    height: 15vw
                    border-radius(50%)
                }
                & h1 {
                    font-size vw(16);
                    margin-bottom 3vw
                }
                & p {
                    word-tip();
                }
                & .second {
                    flex: 4
                }
                & .third {
                    flex: 1
                    flex-y(center, flex-end)
                }
            }
        }
        .myRank {
            width: 100%;
            height: 17vw
            position fixed
            bottom: 0
            padding 3vw
            box-sizing border-box
            overflow hidden
            background white
            flex-x();
            & img {
                width: 15vw
                height: 15vw
                border-radius(50%)
            }
            .my {
                font-size vw(16);
                margin-bottom 3vw
            }
            & p {
                word-tip();
            }
            .second {
                flex: 4
            }
            .third {
                flex: 1
                flex-y(center, flex-end)
            }
        }
    }

</style>
